<template>
  <div>
    <!-- 导航按钮 -->
    <navs></navs>

    <!-- 排行榜 -->
    <div class="toplist">
      <div class="item" v-for="item in playList" :key="item.id">
        <!-- <div class="img"> -->
        <router-link tag="div" :to="'/rank/ranklist?id=' + item.id" class="img">
          <img :src="item.coverImgUrl" alt="" />
          <!-- </div> -->
        </router-link>

        <ul>
          <li
            v-for="(key, index) in item.tracks"
            :key="key.id"
            v-show="index < 3"
          >
            {{ index + 1 }}.{{ key.name }}-{{ key.ar[0].name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getToplist, getPlaylistDetail } from "../api/ranking";
import navs from "../components/base/navs.vue";
export default {
  components: { navs },
  data() {
    return {
      playList: [],
    };
  },

  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter钩子");
    getToplist().then((data) => {
      next((vm) => vm.getPlaylistDetailFun(data.list));
      console.log(data);
    });
  },
  methods: {
    // getToplistFun() {
    //   getToplist().then((data)=> {
    //     console.log(data);
    //     for (let i = 0; i < 35; i++) {
    //       let id = data.list[i].id;
    //       getPlaylistDetail({id:id}).then((data)=> {
    //         console.log(data);
    //         this.playList.push(data.playlist);
    //       })
    //     }
    //     console.log(this.playList);
    //   })

    // }

    // 请求第二个接口
    async getPlaylistDetailFun(list) {
      for (let i = 0; i < list.length; i++) {
        let id = list[i].id;
        // console.log(id);
        // 第二接口
        await getPlaylistDetail({ id: id }).then((data) => {
          this.playList.push(data.playlist);
        });
      }
    },
  },
  created() {
    // this.getToplistFun();
    this.$emit("getnavs-btn");
    // this.$emit("get-style");
  },
};
</script>

<style lang="less">
.toplist {
  margin-top: 5px;
  padding-bottom: 100px;
  .item {
    margin: 0 8px;
    padding: 2px 0px;
    border-bottom: 1px solid #e1e2e2;
    height: 90px;
    display: flex;
    .img {
      flex: 0 0 90px;
      margin-right: 18px;
      background-color: chocolate;
      width: 90px;
      height: 90px;
      border-radius: 2px;
      img {
        width: 90px;
        height: 90px;
      }
    }
    ul {
      flex: 1;
      height: 90px;
      margin-top: 4px;
      li {
        height: 27px;
        line-height: 27px;
        font-size: 12px;
        color: #1b1b1b;
        // 1、固定宽度（高度可有可无）：width: 195px;
        // 2、把盒子转成弹性伸缩盒子：
        display: -webkit-box;
        // 3、弹性盒子排列方式：垂直排列：
        -webkit-box-orient: vertical;
        // 4、规定显示几行文本：
        -webkit-line-clamp: 1;
        // 5、溢出隐藏：
        overflow: hidden;
      }
    }
  }
}
</style>